<template>
	<div class="container">
		<el-button type="primary" round @click="Drawwebgl">webgl渲染</el-button>
		<el-button type="primary" round @click="Drawwebgl2">刷新图层</el-button>
		<div id="vue-openlayers" class="map-x"></div>
	</div>
</template>
<script>
import 'ol/ol.css'
import {
	Map,
	View
} from 'ol'
import Tile from 'ol/layer/Tile'
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Style, Circle, Fill, Circle as CircleStyle, Stroke,Text } from 'ol/style';
import { Vector as VectorLayer, Image as imageLayers } from 'ol/layer';
import WebGLPointsLayer from 'ol/layer/WebGLPoints';
import { Vector as VectorSource } from 'ol/source';
import {getshiduData ,getVideoDetail} from "../api/taifeng.js";
import { Point,LineString} from 'ol/geom';
import Feature from 'ol/Feature';
import fkyLine from '../class/fkyLine.js'
import {
	getPointResolution,
	get as getProjection,
	fromLonLat,
	transform,
} from 'ol/proj';
export default {
	name: 'FirstMap',
	data() {
		return {
			map: null,
			webgiLayers:null,
		}
	},
	methods: {
		iewMap() {
			this.map = new Map({
				target: "vue-openlayers",
				layers: [
					// 天地图路网
					new TileLayer({
						source: new XYZ({
							url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=ed6c3ea685d039c2ce70305cf732cdb1'
						})
					}),

				],
				view: new View({
					projection: "EPSG:4326",  //坐标系，即地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
					center: [123.3972282409668, 24.90960456049752],  //中心点坐标，即北京天安门
					zoom: 6
				})
			});
		},
		async Drawwebgl(){
		//定义渲染的图片样式
		const style={
    symbol: {
      symbolType: 'image',
      src: 'image/logo.png',
      size: [18, 28],
      color: 'lightyellow',
      rotateWithView: false,
      offset: [0, 9],
    }
  }
 // 定义图层·和数据源
 const source=new VectorSource()
 //定义feature
 let features=[]
 const {data}= await getshiduData()
 const shidudata=data.data.data;
 const length=shidudata.length;

 const layers= new WebGLPointsLayer({
    source,
    style,
		disableHitDetection:true
  });
	for(let i=0;i<length;i++){
var pointfeatures=new Feature(new Point([shidudata[i].x,shidudata[i].y]))
features.push(pointfeatures)
 }
  source.addFeatures(features)
  this.map.addLayer(layers);

		},

 Drawwebgl2(){
		
 //定义feature
 
	 let count=1
//  let _this=this
   setInterval( async() => {
		let features=[];
		const style={
    symbol: {
      symbolType: 'image',
      src: 'image/logo.png',
      size: [18, 28],
      color: 'lightyellow',
      rotateWithView: false,
      offset: [0, 9],
    }
  }
	const source=new VectorSource()
			const {data}= await getshiduData()
 const shidudata=data.data.data;
 const length=shidudata.length;

 for(let i=0;i<length;i++){
var pointfeatures=new Feature(new Point(
	[ parseFloat(shidudata[i].x)+count*0.2 ,  parseFloat(shidudata[i].y)+count*0.2]

	))
		features[i]=pointfeatures

 }

 const layers= new WebGLPointsLayer({
    source,
    style,
		disableHitDetection:true
  });
	source.addFeatures(features)
  if(this.webgiLayers) {
    this.map.removeLayer(this.webgiLayers);
    this.webgiLayers.dispose();
  }

	this.webgiLayers=layers;
	this.webgiLayers.changed();
	this.map.addLayer(layers);
	count++
		 }, 1000);
		},
		//绘制曲线
	async DrawLine(){
 new fkyLine({
	map:this.map
 })
	}
	
	},
	mounted() {
		this.iewMap();
		this.DrawLine()
	}
}
</script>

<style scoped>
#vue-openlayers {
	width: 1400px;
	height: 600px;
	margin: 0 auto;
	border: 1px solid #42B983;
}

h3 {
	line-height: 40px;
}
</style>
